<template>
  <!-- 督办事项 -->
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData
      :search-data="searchArr"
      @search="search"
    />
    <!-- 表格 -->
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title" /> -->
      
      <!-- 表格 -->
      <list-table
        ref="table"
        row-key="id"
        :columns="columns"
        :request="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
      >
      <a-button
        slot="prefix"
        class="mb12"
        icon="plus"
        type="primary"
        @click="handleManage(2)"
      >
        新增
      </a-button>
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
        <template
          slot="feedbackTime"
          slot-scope="text, record"
        >
          {{ record.feedbackVO ? record.feedbackVO.feedbackTime : '—' }}
        </template>
        <template
          slot="enabled"
          slot-scope="text, record"
        >
          <span v-if="record.overseeStatus === 'DRAFT'">待提交</span>
          <span v-if="record.overseeStatus === 'NO_FEEDBACK'">结果未反馈</span>
          <span
            v-if="record.overseeStatus === 'NO_COMPLETE'"
            style="color: #ff0000"
          >未完成</span>
          <span v-if="record.overseeStatus === 'SUBMITTED'">结果审批中</span>
          <span v-if="record.overseeStatus === 'PAST'">结果审批通过</span>
          <span
            v-if="record.overseeStatus === 'REJECTED'"
            style="color: #ff0000"
          >结果审批不通过</span>
        </template>
        <template
          slot="action"
          slot-scope="text, record"
        >
          <MoreButton>
          <a @click="handleManage(0, record)">查看</a>
          <template v-if="record.overseeStatus === 'SUBMITTED'">
            <a @click="handleApply(record)">审批信息</a>
          </template>
          <template v-if="record.overseeStatus === 'DRAFT'">
            <a @click="handleManage(1, record)">编辑</a>
            <!-- 删除 -->
            <a
              class="del_btn"
              @click="handleRemove(record)"
            >删除</a>
          </template>
          </MoreButton>
        </template>
      </list-table>
    </a-card>
    <!-- 审批详情 -->
    <ApprovalDetails
      :title="'审批详情'"
      :business-id="businessId"
      :visible="visibleApprove"
      @cancel="visibleApprove = false"
      @confirm="visibleApprove = false"
    />
  </base-breadcrumb>
</template>

<script>
  // import { STable } from '@/components' // 表格
  import { getList, remove } from '@/api/office/supervise' // api
  import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject.vue'
  import Selector from '@/components/Select/Selector'
  import BasePage from '@/views/basePage' // 基础配置
  import StatusDisplay from '@/components/StatusDisplay'
  import ApprovalDetails from '@/components/approvalDetails'
  import OrgTreeSelect from '@/components/OrgTreeSelect'

  const overseeStatusArr = [
    {
      value:'DRAFT',
      label:'待提交',
    },
    {
      value:'NO_FEEDBACK',
      label:'结果未反馈',
    },
    {
      value:'SUBMITTED',
      label:'结果审批中',
    },
    {
      value:'REJECTED',
      label:'结果审批不通过',
    },
    {
      value:'PAST',
      label:'结果审批通过',
    },
    {
      value:'NO_COMPLETE',
      label:'未完成',
    },
  ]
  const searchArr = [
    // 搜索框
    {
      name: '所属单位',
      valueKey: 'searchQuery',
      type: OrgTreeSelect,
    },
    // {
    //   name: '督办发起单位',
    //   type: SelectCompanyAndProject,
    //   valueKey: 'launchUnitId',
    //   isAuth: false,
    //   isAutoSelectMe: true
    // },
    {
      name: '督办事项',
      type: 'input',
      value: 'matter',
    },
    {
      name: '计划完成时间',
      type: 'dateRange',
      value: 'time',
      attr: {
        rangeFormat: ['planCompleteStartTime', 'planCompleteEndTime'],
      },
    },
    {
      name: '状态',
      value: 'overseeStatus',
      type: 'select',
      data: overseeStatusArr
    },
  ]
  const columns = [
    {
      title: '序号',
      width: 80,
      dataIndex: 'index',
      scopedSlots: { customRender: 'index' }
    },
    {
      title: '督办发起单位',
      ellipsis: true,
      dataIndex: 'launchUnitName',
    },
    {
      title: '督办发起部门',
      ellipsis: true,
      dataIndex: 'launchDeptName',
    },
    {
      title: '督办部门负责人',
      ellipsis: true,
      dataIndex: 'deptPrincipalName',
    },
    {
      title: '督办事项分类',
      ellipsis: true,
      dataIndex: 'matterType.name',
    },
    {
      title: '督办事项',
      ellipsis: true,
      dataIndex: 'matter',
    },
    {
      title: '计划完成时间',
      dataIndex: 'planCompleteTime',
      ellipsis: true,
    },
    {
      title: '承办领导/部门负责人',
      dataIndex: 'principalJobs',
      ellipsis: true,
    },
    {
      title: '实际反馈时间',
      dataIndex: 'feedbackVO.feedbackTime',
      scopedSlots: { customRender: 'feedbackTime' },
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'overseeStatus',
      scopedSlots: {
        customRender: 'enabled',
      },
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '180px',
      align: 'center',
      scopedSlots: { customRender: 'action' },
    },
  ]
  export default {
    name:'a'+Date.now(),

    extends: new BasePage(),
    components: {
      // STable,
      ApprovalDetails
    },
    data() {
      this.columns = columns
      this.searchArr = searchArr
      return {
        queryParam: {
          // launchUnitId: JSON.parse(sessionStorage.getItem('ycloud-user_info')).currentPost.id
        }, // 查询参数
        loadData: (parameter) => {
          const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
          return getList(requestParameters).then((res) => {
            return res
          })
        },// 加载数据方法 必须为 Promise 对象
        removeApi: { remove: remove }, // api
        editModel: 0,
        form: {},
        //审批信息
        businessId:"",
        visibleApprove: false,
      }
    },
    methods: {
      // 搜索
      search(value) {
        value && (this.queryParam = value)
        this.$refs.table.refresh(true)
      },
      // 删除
      handleRemove(e){
        this.$confirm({
          title: '温馨提示',
          content: `确认是否删除？`,
          onOk: () => {
            return remove({ id: e.id }).then(() => {
              this.$message.success('删除成功！')
              this.search()
            })
          },
        })
      },
      // 审批信息
      handleApply(e){
        if(e.id){
          this.visibleApprove= true;
          this.businessId = e.id;
        }
      },
      // 操作栏
      handleManage(type, record) {
        this.editModel = type
        let query = {
          editModel: type,
        }
        if (record && record.id) {
          query.id = record.id
        }
        this.$router.push({
          path: '/supervise/management/add',
          query,
        })
      },
    },
  }
</script>
